<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" media="all">
    <style>
    .layui-form {padding: 10px 20px;}
    .layui-card {margin-bottom: 15px;}
    .layui-upload-img {max-width: 120px; margin: 10px 0;}
    .required:after {content: '*'; color: red; margin-left: 4px;}
    .help-block {color: #999; font-size: 12px; margin-top: 4px;}
    </style>
</head>
<body>
    <form class="layui-form" lay-filter="form">
        <!-- 基本信息 -->
        <div class="layui-card">
            <div class="layui-card-header">基本信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label required">商品类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="1" title="普通商品" checked>
                        <input type="radio" name="type" value="2" title="服务商品">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">商品名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" lay-reqtext="请输入商品名称" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">商品分类</label>
                    <div class="layui-input-block">
                        <select name="category_id" lay-verify="required" lay-reqtext="请选择商品分类">
                            <option value="">请选择分类</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" placeholder="请输入商品编码" autocomplete="off" class="layui-input">
                        <div class="help-block">商品编码可以是条形码或自定义编码</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品规格</label>
                    <div class="layui-input-block">
                        <input type="text" name="spec" placeholder="请输入商品规格，例如：500ml" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="unit" placeholder="请输入商品单位" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- 价格信息 -->
        <div class="layui-card">
            <div class="layui-card-header">价格信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label required">零售价格</label>
                    <div class="layui-input-block">
                        <input type="number" name="price" lay-verify="required|number" placeholder="请输入商品售价" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">参考进价</label>
                    <div class="layui-input-block">
                        <input type="number" name="original_price" value="0" placeholder="请输入参考进价" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">会员价格</label>
                    <div class="layui-input-block">
                        <input type="number" name="member_price" value="0" placeholder="请输入会员价格" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- 库存信息 -->
        <div class="layui-card">
            <div class="layui-card-header">库存信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label required">库存数量</label>
                    <div class="layui-input-block">
                        <input type="number" name="stock" value="0" lay-verify="required|number" placeholder="请输入库存数量" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">最低库存</label>
                    <div class="layui-input-block">
                        <input type="number" name="min_stock" value="0" placeholder="请输入最低库存" class="layui-input">
                        <div class="help-block">低于此数量将提示补货</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 其他信息 -->
        <div class="layui-card">
            <div class="layui-card-header">其他信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">商品图片</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="upload">
                                <i class="layui-icon layui-icon-upload"></i> 上传图片
                            </button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="preview">
                                <p id="uploadText"></p>
                            </div>
                            <input type="hidden" name="image" id="image">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="上架" checked>
                        <input type="radio" name="status" value="0" title="下架">
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注说明</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注说明" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">积分设置</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">积分设置</label>
                    <div class="layui-input-block">
                        <select name="points_rule" lay-filter="points_rule">
                            <option value="">不启用</option>
                            <option value="rate">按比例</option>
                            <option value="fixed">固定积分</option>
                        </select>
                        <div class="layui-input-inline" id="points_value_container" style="display:none;">
                            <input type="number" name="points_value" value="0" placeholder="积分值" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">折扣设置</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">折扣设置</label>
                    <div class="layui-input-block">
                        <select name="discount_rule" lay-filter="discount_rule">
                            <option value="">不启用</option>
                            <option value="min">最低折扣</option>
                            <option value="fixed">固定折扣</option>
                        </select>
                        <div class="layui-input-inline" id="discount_value_container" style="display:none;">
                            <input type="number" name="discount_value" value="0" placeholder="折扣值" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="layui-btn layui-btn-normal" id="save"  lay-submit lay-filter="save" >提交</button>
    </form>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['form', 'jquery', 'upload', 'popup'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let upload = layui.upload;
        let popup = layui.popup;
        
        // 加载分类数据
        $.ajax({
            url: '/app/ky_shouyin/admin/goods/category_list',
            type: 'get',
            success: function(res) {
                if (res.code === 0) {
                    var options = '<option value="">请选择分类</option>';
                    layui.each(res.data, function(index, item) {
                        if (item.status === 1) {
                            options += '<option value="' + item.id + '">' + 
                                     new Array(item.level + 1).join('├ ') + item.name + '</option>';
                        }
                    });
                    $('select[name="category_id"]').html(options);
                    form.render('select');
                }
            }
        });

        // 自定义验证规则
        form.verify({
            price: function(value) {
                if (value < 0) {
                    return '价格不能为负数';
                }
            },
            stock: function(value) {
                if (value < 0) {
                    return '库存不能为负数';
                }
            }
        });

        // 监听积分规则选择
        form.on('select(points_rule)', function(data) {
            if(data.value) {
                $('#points_value_container').show();
            } else {
                $('#points_value_container').hide();
                $('input[name="points_value"]').val(0);
            }
        });
        
        // 监听折扣规则选择
        form.on('select(discount_rule)', function(data) {
            if(data.value) {
                $('#discount_value_container').show();
            } else {
                $('#discount_value_container').hide();
                $('input[name="discount_value"]').val(0);
            }
        });

        // 图片上传
        upload.render({
            elem: '#upload'
            ,url: '/app/ky_shouyin/admin/upload/image'
            ,accept: 'images'
            ,acceptMime: 'image/*'
            ,size: 2048 //限制文件大小，单位 KB
            ,before: function(obj){
                $('#uploadText').html('<span class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></span> 上传中...');
                obj.preview(function(index, file, result){
                    $('#preview').attr('src', result);
                });
            }
            ,done: function(res){
                if(res.code == 0){
                    $('#image').val(res.data.url);
                    $('#uploadText').html('<span style="color: #5FB878;">上传成功</span>');
                    popup.success('图片上传成功');
                }else{
                    $('#uploadText').html('<span style="color: #FF5722;">上传失败</span>');
                    popup.error('上传失败：' + res.msg);
                }
            }
            ,error: function(){
                $('#uploadText').html('<span style="color: #FF5722;">上传失败</span>');
                popup.error('上传失败，请重试');
            }
        });
        
        // 提交事件
        form.on('submit(save)', function(data) {
            let field = data.field;
            field.price = parseFloat(field.price) || 0;
            field.original_price = parseFloat(field.original_price) || 0;
            field.member_price = parseFloat(field.member_price) || 0;
            field.stock = parseInt(field.stock) || 0;
            field.min_stock = parseInt(field.min_stock) || 0;
            field.points_value = parseFloat(field.points_value) || 0;
            field.discount_value = parseFloat(field.discount_value) || 0;
            
            $.ajax({
                url: '/app/ky_shouyin/admin/goods/add'
                ,type: 'POST'
                ,data: field
                ,dataType: 'json'
                ,success: function(res){
                    if(res.code === 0){
                        layer.msg('添加成功', {
                            icon: 1
                            ,time: 1000
                        }, function(){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.layui.table.reload('goods-table');
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
                ,error: function(){
                    layer.msg('服务器错误，请稍后重试', {icon: 2});
                }
            });
            return false; // 阻止表单跳转
        });
    });
    </script>
</body>
</html> 